<template>
  <div class="FuheDilanbox">
    <div class="leftbox">
      <EnterpriseTree @handleClick="handleClick"></EnterpriseTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <span>
                <el-radio-group v-model="radio">
                  <el-radio label="load">负荷</el-radio>
                  <el-radio label="epower">电量</el-radio>
                </el-radio-group>
              </span>
              <span class="time" >时间</span>
              <span >
                <el-date-picker
                  size="small"
                  style="margin-right: 20px;"
                  v-model="value1"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </span>
              <span>
                <el-button  type="primary" size="small" @click="gettablelist">查询</el-button>
                <el-button  type="primary" size="small" @click="zhixing">执行重算</el-button>
              </span>
      </div>
      <div class="bodys">
        <div class="title">
          <div>负荷电量</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="table">
          <TableColumn
          ref="tablecolumn"
          :issize="issize"
            :tableData="tableData" 
            :tableConfig="tableConfig" >
          </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getduogecedianapi} from '@/api/analysis'
import {postzhixingapi} from '@/api/prwpaid/cost-management/Recharge'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import EnterpriseTree from '@/components/EnterpriseTree/index.vue'
export default {
  name: 'CallPoliceFuheDilan',
  components: {
    EnterpriseTree,
    TableColumn,
    TopTile
  },
  data() {
    return {
      value1:[],
      radio: 'load',
      issize: 'medium',
      tableData: [],
      tableConfig: [],
      treevalue:{}
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    handleClick(val) {
      this.treevalue = val
      this.gettablelist()
    },
    // 执行重算
    async zhixing() {
      if(!this.treevalue.companyNo) return this.$message.warning('请先选择企业')
      postzhixingapi({ companyNo: this.treevalue.companyNo, startDate: this.value1[0], endDate: this.value1[1], type: this.radio }).then(res => {
        if (res.code == '200') {
          this.$message.success('执行成功')
          this.gettablelist()
        } else {
          this.$message.warning(`${res.message}`)
        }
      })
    },
    // 获取表格数据
    async gettablelist() {
      if(!this.treevalue.companyNo) return this.$message.warning('请先选择企业')
      this.$refs.tablecolumn.loadind=true
      const res = await getduogecedianapi({
        deviceIds: this.treevalue.id,
        itemTags: 'CurkWhRec,P',
        startTime: this.value1[0]+' '+'00:00:00',
        endTime:this.value1[1]+' '+'24:00:00'
      })
      const newarr=['CurkWhRec','P']
      this.tableConfig = [
      {label:'序号',type:'index',width:'80',center:'center'},
      {label:'企业名称',prop:'deviceName'},
        { label: '时间', prop: 'time', width: '150', center: 'center' },]
      for (let i = 0; i < 2; i++){
        this.tableConfig.push({label:res.data.list[i].itemTagName,prop:newarr[i],center:'right'})
      }
      // 获取timePoints的长度
      this.tableData=[]
      var timePointsLength = res.data.list[0].timePoints.length;

      // 遍历timePoints数组
      for (var i = 0; i < timePointsLength; i++) {
          var newObj = {
              time: res.data.list[0].timePoints[i]
          };
          // 遍历list中的每个对象
          res.data.list.forEach(function (item) {
              newObj['deviceName'] = item.deviceName;
              newObj[item.itemTag] = item.itemPoints[i];
          });
          // 输出新数组
          this.tableData.push(newObj);
      }
      this.$refs.tablecolumn.loadind=false
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      if (!this.treevalue.companyNo) return this.$message.warning('请先选择数据')
      exportexcel('pio-microservice-biz/pio/iot-item/his/bitch/excel',{
        deviceIds: this.treevalue.id,
        itemTags: 'CurkWhRec,P',
        startTime: this.value1[0]+' '+'00:00:00',
        endTime:this.value1[1]+' '+'24:00:00'
      },'负荷电量')
    },
    // 刷新列表
    shuaxin() {
      if(!this.treevalue.companyNo) return this.$message.warning('请先选择企业')
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      this.value1=[]
      const date = new Date()
      const year = date.getFullYear() // 年
        const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1.push(year+'-'+month+'-'+day);
      this.value1.push(year+'-'+month+'-'+day);
    },
  },
};
</script>

<style  scoped>
 .FuheDilanbox{
  height: 100%;
  display: flex;
  .leftbox{
    width: 300px;
    background-color: #fff;
    padding: 20px;
  }
  .rightbox{
    height: 100%;
    width: calc(100% - 310px);
    margin-left: 10px;
    .righttop{
      height: 80px;
      background-color: #fff;
      line-height: 80px;
      padding: 0 20px;
      margin-bottom: 10px;
      .time{
        margin: 0 15px;
        font-size: 14px;
        color: #606266;
      }
    }
    .bodys{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title{
        margin-bottom: 10px;
        display:flex;
        justify-content:space-between;
      }
      .table{
        height: 93%;
      }
    }
  }
 }
</style>